<template>
  <!-- 排行榜 -->
  <div class="ranklist">
    <scroll ref="scroll"
            class="rank-scroll"
            v-if="ranklist.lenght!==0">
      <div class="ranktop">
        <rank-list-item :rank-id='ranklist[0].id'
                        :title="['飙','升','榜']"
                        :bg-color="['#56a1e3','#5a8beb']" />
        <rank-list-item :rank-id='ranklist[1].id'
                        :title="['新','歌','榜']"
                        :bg-color="['#34aabe','#56c2cd']" />
        <rank-list-item :rank-id='ranklist[2].id'
                        :title="['原','创','榜']"
                        :bg-color="['#d53d6a','#eb638d']" />
        <rank-list-item :rank-id="ranklist[3].id"
                        :title="['热','歌','榜']"
                        :bg-color="['#c7523c','#cc7455']"></rank-list-item>
        <rank-list-item :rank-id="ranklist[4].id"
                        :title="['歌','手','榜']"
                        :bg-color="['#9455ce','#9946c9']"></rank-list-item>
      </div>
      <h2>全球榜</h2>
      <music-list :personList='ranklist.slice(4)'
                  @imgLoad='imgLoad' />
    </scroll>

  </div>
</template>

<script>
import Scroll from 'components/common/scroll/Scroll.vue'

import RankListItem from '../childComps/RankListItem'
import MusicList from 'components/content/musiclist/MusicList'
import { _getRankList } from 'network/discover'
import { ImgMixin } from 'mixin/ImgMixin';
export default {
  name: 'MusicRankList',
  components: {
    Scroll,
    RankListItem,
    MusicList
  },
  data () {
    return {
      ranklist: []
    }
  },
  // 图片加载
  mixins: [ImgMixin],
  created () {
    _getRankList().then(res => {
      this.ranklist = res.data.list
    })
  }
}
</script>

<style scoped>
.ranklist {
  width: 100%;
  height: 100%;
}
.rank-scroll {
  height: 100%;
}
.ranktop {
  display: flex;
  flex-wrap: wrap;
}
.h2 {
  font-weight: 300;
  margin-bottom: 20px;
}
</style>
